<template>
  <!--
    展示帖子
  -->

  <div>
    <div class="note-type page-continue">
      <div class="type-tittle">
        <i class="el-icon-menu"></i>
        {{this.typeName}}
      </div>
      <el-button type="primary" @click="$router.push('/note/new')" icon="el-icon-edit" circle></el-button>
    </div>
    <div class="page-continue">
      <div class="line">置顶帖</div>
      <NoteListModel :value="topnotes"></NoteListModel>
      <div class="line">普通主题</div>
      <NoteListModel :value="notes"></NoteListModel>
      <div class="page">
        <el-pagination
          layout="prev, pager, next"
          background
          @current-change="page"
          :page-count="maxpage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import NoteListModel from "@/components/note/NoteList.vue";
import noteApi from "@/assets/api/note.js";
export default {
  name: "home",
  data() {
    return {
      maxpage: 1,
      text: "",
      typeid: "",
      topnotes: [],
      notes: [],
      typeName: ""
    };
  },
  watch: {
    $route() {
      this.typeid = this.$route.params.id;
      this.init();
    }
  },
  mounted() {
    this.typeid = this.$route.params.id;
    this.init();
  },
  methods: {
    init() {
      noteApi.init(this.typeid).then(resp => {
        this.topnotes = resp.data.topNotes;
        this.notes = resp.data.notes;
        this.typeName = resp.data.typeName;
        this.maxpage = resp.data.maxPage == 0 ? 1 : resp.data.maxPage;
      });
    },
    page(page) {
      noteApi.page(this.typeid, page).then(resp => {
        this.maxpage = resp.data.maxPage;
        this.notes = resp.data.data;
      });
    }
  },
  components: {
    NoteListModel
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/screen.scss";
.note-type {
  padding-top: 10vh;
  @media (max-width: $media-screen-width) {
    padding-top: 15vh;
  }
  padding-bottom: 1vh;
  margin-bottom: 4vh;
  background-image: url("../../assets/wallhaven-57300.jpg");
  background-position: center;
  background-size: cover;
  height: 30px;
  .el-button {
    float: right;
    position: relative;
    top: 1.9vh;
    z-index: 2;
  }
}
.type-tittle {
  color: #f0f0f0;
  font-size: 30px;
  font-weight: 700;
  float: left;
}
.line {
  color: #909399;
  text-align: center;
  border-top: 2px dashed #909399;
  border-bottom: 2px dashed #909399;
  padding: 5px 0;
  margin: 10px 0;
}
.page {
  text-align: center;
}
</style>


